/* 可控比例虚线 */
.dashed {
    height: 1px;
    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);
    background-size: 10px 100%; 
}

/* 带框三角 */
.tri {
    margin-top: 10px;
    width: 6px; height: 6px;
    background: linear-gradient(to top, #000, #000) no-repeat, linear-gradient(to right, #000, #000) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0, 0%, 100%, 0) 6px) no-repeat;
    background-size: 6px 1px, 1px 6px, 6px 6px;
    transform: rotate(-45deg);
}

/* 加减号 */
.box {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    background: #ddd;
    border-radius: 5px;
    border: 1px solid #999;
}
.add {
    height: 100%;
    background: linear-gradient(to bottom, #333 50%, transparent 50%) no-repeat center center,
                linear-gradient(to right, #333 50%, transparent 50%) no-repeat center center;
    background-size: 15px 3px, 3px 15px;
}
.sub {
    height: 100%;
    background: linear-gradient(to bottom, #333 50%, transparent 50%) no-repeat center center;
    background-size: 15px 3px, 3px 15px;
}
.box:active {
    background: #aaa;
}